<template>
  <div class="setting-viewconfig-container">
    <!-- 表格 -->
    <div>
      <el-table :data="configData" style="width:100%" stripe>
        <el-table-column prop="title" label="标题" align="center" width="200px"></el-table-column>
        <el-table-column label="内容" align="center">
          <template slot-scope="scope">
            <el-scrollbar :wrapStyle="{height:'40px'}" :viewStyle="{height:'40px'}" :noresize="false">
              <div class="html-val" v-html="scope.row.value"></div>
            </el-scrollbar>
          </template>
        </el-table-column>
        <el-table-column prop="format_create_time" label="创建时间" align="center" width="200px"></el-table-column>
        <el-table-column label="操作" align="center" width="100px">
          <template slot-scope="scope">
            <el-button class="action-button" type="text" 
              @click="eidt(scope.row)"><i class="el-icon-edit"/></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <Modal v-model="disEdit" width="1128" :footer-hide="true">
      <tinymce v-model="editData.value" :height="500" width="100%" v-if="disEdit"/>
      <div style="text-align:center;margin: 15px 0">
        <el-button type="primary" size="small" style="padding:8px 30px;" @click="submit">提 交</el-button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { getViewConfig, putViewConfig } from '@/api/setting'
import Tinymce from '@/components/Tinymce'

export default {
  name: 'setting-viewConfig',
  components: {
    Tinymce
  },
  data() {
    return {
      configData: [],
      editData: {value:''},
      disEdit: false
    }
  },
  mounted() {
    this.getViewConfig();
  },
  methods: {
    /**
     * 获取页面配置信息
     */
    getViewConfig() {
      const params = {
        key: this.$store.state.app.activeApp.saa_key,
        page: 1,
        limit: 10
      };
      getViewConfig(params).then(res => {
        if(res.status === 200){
          this.configData = res.data;
        }else if(res.status === 204){
          this.configData = [];
        }else{
          this.$message.error(res.message);
        }
      })
    },
    /**
     * 编辑
     */
    eidt(data) {
      this.disEdit = true;
      this.editData = data;
    },
    submit() {
      const params = {
        id: this.editData.id,
        value: this.editData.value,
        key: this.$store.state.app.activeApp.saa_key
      }
      putViewConfig(params).then(res => {
        if(res.status === 200) {
          this.$message.success('修改成功！');
          this.disEdit = false;
          this.getViewConfig();
        }else{
          this.$message.error(res.message);
        }
      })
    }
  },
}
</script>

<style lang="scss" scope>
.setting-viewconfig-container{
  min-height: calc(100vh - 100px);
  margin: 20px;
  background-color: #fff;
  padding:25px;
  box-shadow: 0px 0px 4px 0px rgba(115, 115, 115, 0.2);
}
.html-val{
  max-height: 100px;
  overflow: hidden;
}
</style>